/**
 * Created by mac on 2017/12/21.
 */
import React from 'react'
import {Link, BrowserRouter, Route, Switch} from 'react-router-dom'

import Home from '../component/Home'
import Page1 from '../component/Page1'
import Counter from '../container/counter'
import UserInfo from '../container/userInfo'
import {Row, Col, Breadcrumb, Menu} from 'antd'

const appRouter = () => {

    return (
        // 这个是浏览器专用的router
        <BrowserRouter>
            <div  >
                <Menu mode='horizontal'>
                    <Menu.Item key="home"><Link to="/">home</Link></Menu.Item>
                    <Menu.Item key="page1"><Link to="/page1">page1</Link></Menu.Item>
                    <Menu.Item key="counter"><Link to="/counter">counter</Link></Menu.Item>
                    <Menu.Item key="userinfo"><Link to="/userinfo">userinfo</Link></Menu.Item>
                </Menu>
                {/*<ul>*/}
                {/*<li ><Link to="/">home</Link></li>*/}
                {/*<li><Link to="/page1">page1</Link></li>*/}
                {/*<li><Link to="/counter">counter</Link></li>*/}
                {/*<li><Link to="/userinfo">userinfo</Link></li>*/}
                {/*</ul>*/}
                {/*这里使用switch会进行匹配
                 这里传入的组件为 container 它是包装过后的 component*/}
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/page1" component={Page1}/>
                    <Route path="/counter" component={Counter}/>
                    <Route path="/userinfo" component={UserInfo}/>
                </Switch>
            </div>
        </ BrowserRouter >
    )
}


export default appRouter